<!DOCTYPE html>
<html>
<head>
    <title>JODConverter</title>
    <style>

        body {
            font-family: sans-serif;
            font-size: 13px;
        }

        a {
            text-decoration: none;
            color: #900;
        }

        h1 {
            font-size: 16px;
        }

        h2 {
            font-size: 14px;
        }

        table.form {
            margin-left: 15px;
        }

        td.label {
            text-align: right;
            right-padding: 10px;
        }

    </style>
    <script type="text/javascript" src="js/documentFormats.js"></script>
    <script type="text/javascript"
            src="swaggerui/lib/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">

        function updateOutputFormats(inputDocument) {
            var dot = inputDocument.value.lastIndexOf('.');
            if (dot != -1) {
                var extension = inputDocument.value.substr(dot + 1);
                var family = importFormatTable[extension];
                if (family == undefined) {
                    alert('Sorry, but conversion from the document type "' + extension + '" is not supported');
                    return false;
                }
                var formats = exportFormatTable[family];
                var options = inputDocument.form.outputFormat.options;
                options.length = 0;
                for (var i = 0; i < formats.length; i++) {
                    var option = formats[i];
                    if (option.value != extension) {
                        options[options.length] = option;
                    }
                }
            }
        }

        function doSubmit(form) {
            form.action = '/converter/' + form.outputFormat.value;
            return true;
        }

    </script>
</head>
<body onload="updateOutputFormats(document.forms[0].inputDocument)">

<h2>office转换pdf</h2>

<form method="post" enctype="multipart/form-data" action="/converter/pdf"
      onsubmit="return doSubmit(this)">
    <table class="form">
        <tr>
            <td class="label">Document:</td>
            <td>
                <input type="file" name="inputDocument" size="40"/>
            </td>
        </tr>
        <tr>
            <td class="label">Convert To:</td>
            <td>
                <select name="outputFormat" style="width: 38ex;">
                    <option value="pdf">Portable Document Format (pdf)</option>
                </select>
                <input type="submit" value="Convert!"/>
            </td>
        </tr>
    </table>
</form>

<hr/>

<a href="#"
   onclick="preview()"><h3>预览</h3></a>
<iframe id="displayPdfIframe" width="100%" height="500px;"></iframe>

<hr/>

<input type="file" name="file" onchange="showimg(this)">
<img src="" id="previewImage" width="70" height="75"
     onclick="showoriginal(this)">
<img src="" id="originalImage" onclick="closeOriginalImage(this)">

<hr/>

<input type="button" value="点我啊" onclick="readImg()">
<img src="" id="previewImage2" width="70" height="75"
     onclick="showoriginal2(this)">
<img src="" id="originalImage2" onclick="closeOriginalImage(this)">

</body>
</html>
<script type="text/javascript">
    function preview() {
        document.getElementById('displayPdfIframe').src = '/plugins/pdfjs/generic/web/viewer.html?file=' + encodeURIComponent('/preview/JSON1482224715718.pdf');
    }

    function showimg(source) {
        if (!window.FileReader) return;
        var file = source.files[0];
        if (!/image\/\w+/.test(file.type)) {
            alert("请确保文件为图像类型");
            return;
        }
        var reader = new FileReader();
        reader.onload = function (e) {
            // img 元素
            document.getElementById('previewImage').src = e.target.result;
        };
        reader.readAsDataURL(file);
    }

    function showoriginal(img) {
        var imgs = document.getElementById("originalImage");
        imgs.src = img.src; // 给新的img对象链接
        console.log(imgs.width, imgs.height);
        console.log(img.naturalWidth);  // 获取图片的原始的宽度
        console.log(img.naturalHeight); // 获取图片的原始的高度
    }

    function closeOriginalImage(e) {
        e.src = "";
    }

    function readImg() {
        document.getElementById('previewImage2').src = '/preview/' + encodeURIComponent('上线3.jpeg');
    }

    function showoriginal2(img) {
        var imgs = document.getElementById("originalImage2");
        imgs.src = img.src; // 给新的img对象链接
        console.log(imgs.width, imgs.height);
        console.log(img.naturalWidth);  // 获取图片的原始的宽度
        console.log(img.naturalHeight); // 获取图片的原始的高度
    }
</script>